<template>
  <div class="container">
    <div class="content def">
      <p style="color:gray;margin-bottom:5px;">订单信息确认</p>

      <div class="address">
        <p v-show="addresses.length !== 0" style="margin-bottom:10px;float:left;">确认地址</p>
        <p class="add" @click="addAddress">添加地址</p>
        <Dialog ref="change"></Dialog>
            <!-- 存在收货地址 -->
        <div v-show="addresses.length !== 0" v-for="address in addresses" :key="address.address_id">
        <div style="clear:both;"></div>
        <div class="item">
        <input type="radio" :title="address.address_user" checked>
        <span>{{address.address_user}}</span><span>19950284746</span>
        <span>{{address.address_info}}</span>
        <span style="color:#c69c6c;">默认地址</span>
        <p>修改</p>
        </div>
        </div>  
          <!-- 不存在 -->
        <div v-show="addresses.length === 0"><span>当前不存在收货地址！</span></div>
      </div>
      
      <div class="order">
        <p style="margin-bottom:10px;">确认订单</p>
        <!-- 遍历 -->
        <div class="one" v-for="item in value" :key="item.goods_id">
          <div class="image"><img style="border-radius:1px;" :src="item.goods_url" alt=""></div>
          <div style="color:gray;font-size:14px;text-align:left;width:240px;">
              {{item.goods_title}}
          </div>
          <div style="color:#E64347;">￥{{item.goods_price}}</div>
          <div style="color:#E64347;">{{item.car_goods_num}}件</div>
          <div style="color:#E64347;font-size:20px;">￥{{item.goods_price*item.car_goods_num}}</div>
        </div>
        
      </div>

      <div class="settlement">
          <p>总金额：<span style="vertical-align:middle;color:#E64347;font-size:24px;">
              ￥{{total}}</span></p>
          <p v-show="addresses.length !== 0">收货人：{{consignee}}</p>
          <p v-show="addresses.length === 0">请添加收货人！</p>
          <button @click="settlement" style="background:#E64347;margin-right:10px;">提交订单</button>
          <button @click="backCar">返回购物车</button>
      </div>

      <div v-if="dialog">
          <!-- 遮罩层 -->
        <div class="black" @click="close"></div> 
        <!-- 弹出层 -->
        <div class="dialog">
            <span style="float:right;cursor:pointer;" @click="close">
                <i style="font-size:20px;" class="el-icon-close"></i>
            </span>
            <div style="text-align:center;">
                <img style="width:150px;margin-top:40px;" src="../assets/right.jpg" alt="">
                <br><span>提交订单成功！</span>
                <p style="font-size:12px;color:grey;margin:5px 0;">
                    您可以点击下方按钮继续购物或者查看订单！
                </p>
                <button @click="close">继续购物</button>
                <button style="margin-left:10px;" @click="lookOrder">查看订单</button>
            </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import Dialog from '../components/common/Dialog.vue'
import {reqOrderSubmit,reqAddressList} from '../api'
export default {
    name:'Settlement',
    components:{Dialog},
    data() {
        return {
            dialog:false,
            addresses:[],
            isCarFrom:false //标记是否是从购物车进入该页面，默认false
        }
    },
    beforeRouteEnter (to, from, next) { //进入组件时调用
        next((vm)=>{
            if(from.path === '/car'){
                vm.$data.isCarFrom = true
            }
        })
    },
    async mounted() {
        this.addresses = await reqAddressList(this.$local.get('key'))
        this.$bus.$on('updateAddress',(item)=>{
            this.addresses = item
        })
    },
    beforeDestroy() {
        this.$bus.$off('updateAddress')
    },
    props:['value'],
    methods: {
        close(){
            this.dialog = false
            this.$router.replace('/mall')
        },
        async settlement(){ //结算按钮
            if (this.addresses.length === 0) {
                this.$message.warning("请添加收货地址！")
            }else{
                this.dialog = true
                let id = [] //存储商品id
                let num = [] //存储商品数量
                let car_id = [] //存储购物车id
                this.value.forEach(item => {
                    id.push(item.goods_id)
                    num.push(item.car_goods_num)
                    car_id.push(item.car_id)
                });
                await reqOrderSubmit(this.$local.get('key'),id,car_id,num,this.isCarFrom)
            }
        },
        backCar(){ //返回购物车
            this.$router.replace("/car")
        },
        addAddress(){
            this.$refs.change.open() //调用子组件的方法
        },
        lookOrder(){  //查看订单
            this.$router.replace('/user/order')
        }
    },
    computed:{
        total(){ //总价
            let total = 0.00
            this.value.forEach(item => {
                total+=item.goods_price*item.car_goods_num 
            });
            return total
        },
        consignee(){
            let obj = {}
            this.addresses.forEach(item => {
                obj = item
            });
            return obj.address_user+" "+obj.address_tel+" "+obj.address_info
        }
    }
}
</script>

<style scoped>
    .black{
      /* display: none; */
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 2;
      opacity: 0.5;
      top: 0;
      left: 0;
      background: #000000;
    }
    .dialog{
      /* display: none; */
      position: fixed;
      width: 480px;
      max-height: 80%;
      height: 320px;
      z-index: 1000;
      background: #ffffff;
      border-radius: 5px;
      top: 50%;
      left: 50%;
      padding: 15px;
      margin: -160px 0 0 -240px;
    }
    .dialog button{
        font-size: 12px;
    }
    .def{
        margin-top: 30px;
    }
    .address{
        padding:15px;
        background:white;
    }
    .address:hover .item{
        background: #F4F3F1;
    }
    .address:hover p{
        display: block;
    }
    .address span{
        color: gray;
        font-size: 14px;
        margin-left: 10px;
    }
    .item{
        border:1px dashed #c69c6c;
        padding:5px;
        margin-bottom: 5px;
    }
    input ~ p{
        color: #c69c6c;
        float: right;
        font-size: 14px;
        margin-left: 10px;
        cursor: pointer;
        display: none;
    }
    .add{
        margin-bottom:10px;
        float:right;
        color:#c69c6c;
        cursor: pointer;
    }
    .add:hover{
        color: #E64347;
    }

    .order{
        padding:10px;
        background:white;
        margin-top:10px;
    }
    .one{
        background: #F4F3F1;
        padding:5px;
        overflow: hidden;
        text-align: right;
        margin-bottom: 10px;
    }
    .one > div{
        float: left;
    }
    .one > div:nth-of-type(n+2){
        margin-left: 30px;
        width: 186px;
    }
    .image{
        width: 60px;
        height: 60px;
        overflow: hidden;
    }

    .settlement{
        margin-top: 10px;
        background: white;
        padding: 10px;
    }
    .settlement p{
        font-size: 14px;
        color: gray;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    button{
        padding: 10px 20px;
        font-size: 18px;
    }
</style>